<template>
  <view class="category">
    <ugo-search></ugo-search>
    <view class="main">
      <view class="menu">
        <view
          :class="['menu-item',current===index?'active':'']"
          v-for="(item,index) in menus"
          :key="item"
          @click="handleItemSelect(index)"
        >{{item}}</view>
      </view>
      <view class="content">
        <view class="goods-group" v-for="item1 in goods" :key="item1.cat_id">
          <!-- 标题 -->
          <view class="goods-title">{{item1.cat_name}}</view>
          <view class="goods-list">
            <navigator
              v-for="item2 in item1.children"
              :key="item2.cat_id"
              :url="'/pages/goods_list/goods_list?id='+item2.cat_id"
            >
              <u-image width="120rpx" height="120rpx" :src="item2.cat_icon"></u-image>
              <view class="goods-name">{{item2.cat_name}}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // categories: [],
      // 控制左侧菜单选中的索引
      current: 0,
      menus: [],
      goods: []
    };
  },
  onLoad() {
    this.categories = [];
    // this.getCategory();
    const storeCategory = uni.getStorageSync("categories");
    if (storeCategory) {
      // 有缓存
      // console.log("有缓存");
      if (Date.now() - storeCategory.time > 1000 * 10) {
        // 过期 重新发送请求
        // console.log("过期 重新发送请求");
        this.getCategory();
      } else {
        // 没有过期 可以使用缓存
        // console.log("没有过期 可以使用缓存");
        this.categories = storeCategory.data;
        this.menus = this.categories.map(item => item.cat_name);
        this.goods = this.categories[this.current].children;
      }
    } else {
      // console.log("没有缓存");
      this.getCategory();
    }
  },
  methods: {
    // 获取接口数据
    async getCategory() {
      const res = await this.$u.get("/categories");
      this.categories = res.message;
      uni.setStorageSync("categories", {
        data: this.categories,
        time: Date.now()
      });
      this.menus = this.categories.map(item => item.cat_name);
      this.goods = this.categories[this.current].children;
    },
    handleItemSelect(current) {
      this.current = current;
      this.goods = this.categories[this.current].children;
    }
  }
};
</script>
<style lang="scss">
.category {
  display: flex;
  height: 100vh;
  flex-direction: column;
  .main {
    flex: 1;
    display: flex;
    overflow: hidden;
    .menu {
      width: 182rpx;
      overflow: auto;
      .menu-item {
        height: 74rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666666;
      }
      .active {
        background-color: $backColor;
        color: #fff;
      }
    }
    .content {
      flex: 1;
      // background-color: aqua;
      overflow: auto;
      .goods-group {
        .goods-title {
          height: 74rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #666666;
        }
        .goods-list {
          display: flex;
          flex-wrap: wrap;
          navigator {
            width: 33.33%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 15rpx 0;
            .goods-name {
              margin-top: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>